<template>
  <view class="pay_body">
    <view class="pay_header">
      <view class="icon">¥</view>
      <view class="money">{{ totalCost.toFixed(2) }}</view>
    </view>
    <view class="pay_content">
      <view class="left" :class="{ active: payType == 1 }" @click="payType = 1">
        <view class="one">
          <view class="t">聚合支付</view>
          <view class="b">使用聚合支付</view>
        </view>
        <view class="tow">
          <view class="icon" v-if="payType == 1">已选</view>
          <image src="@/assets/images/index/icon_jvhe.png"></image>
        </view>
      </view>
      <view
        class="right"
        :class="{ active: payType == 2 }"
        @click="payType = 2"
      >
        <view class="one">
          <view class="t">好友代付</view>
          <view class="b">邀请好友代付</view>
        </view>
        <view class="tow">
          <view class="icon" v-if="payType == 2">已选</view>
          <image src="@/assets/images/index/icon_daifu.png"></image>
        </view>
      </view>
    </view>
    <view class="pay_btn_box">
      <view class="pay_btn" @click="success">确定支付</view>
    </view>
<!--    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showBasic">-->
<!--      &lt;!&ndash; <vue-qr :text="codeUrl" :size="500" :logoScale="0.2"> </vue-qr> &ndash;&gt;-->
<!--    </nut-popup>-->
  </view>
</template>
<script lang="ts" setup>
import useMyOrderStore from "@/store/myOrder";
import Taro,{ useDidShow,useDidHide,useUnload } from "@tarojs/taro";
import {computed, ref} from "vue";
import { $get,$post } from "@/@api";
//import VueQr from "vue-qr";

const order = useMyOrderStore();
const payType = ref<number>(1);
const showBasic = ref<boolean>(false);
const codeUrl = ref();
const payTimer = ref<any>(null)
const totalCost = computed(()=>{
  return order.payList.reduce((totalCost,item)=>{
    //actualTotalCost
    let cost = 0
    item.costList.forEach((aa) => {
      if (aa.paid == "0") {
        cost += aa.actualMoney * 1 - aa.paidMoney * 1;
      }
    });
    return totalCost + cost
  },0)
})
async function success() {
  let allmoney: any = 0
  let billNoList: any = []
  order.payList.forEach((item)=>{
    //承运单号处理
    billNoList.push(item.billNo)
    //总价格处理与费用明细处理
    item.costList.forEach((aa) => {
      if (aa.paid == "0") {
        allmoney += aa.actualMoney * 1 - aa.paidMoney * 1;
      }
    });
  })
  let postData = {
    bill: {
      billNos: billNoList,
      money: allmoney,
      actualMoney: allmoney,
      serviceCharge: 0,
      btssId: 1, //!!!!!!
      // btssType: "3",
      // details: details,
      manageFee: []
    },

    device_info: "pp01",
    body: "支付运单3",
    attach: "000003069",
    total_fee: process.env.NODE_ENV === 'production' ? Math.ceil(allmoney * 100) : 1,
    branchno: "00002",
    paytype: "04",
    eop: "SYSADMIN",
    type: "01",
    // v2: JSON.parse(sessionStorage.getItem("userMessage")).openid,
    v3: "",
    isdebug: "True",
    debug: true,
  };
  //postData = JSON.parse('{"bill":{"billNos":["250020851"],"money":10,"actualMoney":10,"serviceCharge":0,"btssId":1},"device_info":"pp01","body":"支付运单3","attach":"000003069","total_fee":1,"branchno":"00002","paytype":"04","eop":"SYSADMIN","type":"01","v3":"","isdebug":"True","debug":true}')

  let res = await $post('/selfmachine-system/fee/reckLogBatch',{billNoArr:billNoList,manageFee:[]})
  console.log(res,415)
  if(res.data.code != 200){
    return
  }
  $post<any>("/selfmachine-system/fee/newPay", postData).then((res) => {
    if (res.data.code == 200) {
      codeUrl.value = JSON.parse(res.data.data).QRCODESTRING
      Taro.setStorageSync('payOrderId',JSON.parse(res.data.data).ORDERID)
      if (payType.value == 1) {
        Taro.navigateTo({
          url: '/pages/pay/web?url='+encodeURIComponent(codeUrl.value)
        })
      } else if (payType.value == 2) {
        showBasic.value = true;
      }
    } else {
      Taro.showToast({
        icon: 'none',
        title: '支付异常'
      })
    }
  })




}

useDidShow(()=>{
  if(payTimer.value){
    clearInterval(payTimer.value)
  }
  payTimer.value = setInterval(async()=>{
    if(Taro.getStorageSync('payOrderId')){
      const res = await $get('/selfmachine-system/fee/pay/result?orderid='+Taro.getStorageSync('payOrderId'))
      if(res.data.code === 200){
        let data = JSON.parse(res.data.data.data)[0];
        if (data.STATUSCODE && data.STATUSCODE == "1") {
          Taro.removeStorageSync('payOrderId')
          clearInterval(payTimer.value)
          Taro.redirectTo({
            url: '/pages/pay/paySuccess'
          })
        }
      }
    }
  },1000)
})

useDidHide(()=>{
  if(payTimer.value){
    clearInterval(payTimer.value)
  }
})
useUnload(()=>{
  if(payTimer.value){
    clearInterval(payTimer.value)
  }
})

</script>

<style lang="scss">
.active {
  border: 1rpx solid #0966ff;
}
.pay_btn_box {
  width: 100%;
  height: 128rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #f5f5f5;
  .pay_btn {
    width: 702rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0966ff;
    font-size: 32rpx;
    border-radius: 200rpx;
    color: #ffffff;
  }
}
.pay_body {
  width: 100vw;
  height: 100vh;
  .pay_header {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      font-family: PingFang SC;
      font-size: 44rpx;
      font-weight: normal;
      color: #252525;
    }
    .money {
      font-family: PingFang SC;
      font-size: 76rpx;
      color: #252525;
    }
  }
  .pay_content {
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    .left {
      width: 344rpx;
      height: 180rpx;
      background: linear-gradient(242deg, #e5efff 0%, #f2f7ff 99%);
      border-radius: 16rpx;
      margin-right: 24rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .one {
        margin-left: 24rpx;
        margin-top: 24rpx;
        .t {
          font-size: 28rpx;
          font-weight: 700;
        }
        .b {
          color: #666666;
          font-size: 24rpx;
        }
      }
      .tow {
        height: 100%;
        width: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        image {
          width: 104rpx;
          height: 104rpx;
          margin-top: 25rpx;
          margin-right: 10rpx;
        }
        .icon {
          width: 60rpx;
          height: 32rpx;
          border-radius: 0px 4rpx 0px 16rpx;
          font-size: 18rpx;
          background: #0966ff;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .right {
      width: 344rpx;
      height: 180rpx;
      box-sizing: border-box;
      background: linear-gradient(
        62deg,
        #f3f2ff 1%,
        #e8e5ff 100%,
        #e1deff 100%
      );
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      .one {
        margin-left: 24rpx;
        margin-top: 24rpx;
        .t {
          font-size: 28rpx;
          font-weight: 700;
        }
        .b {
          color: #666666;
          font-size: 24rpx;
        }
      }
      .tow {
        height: 100%;
        width: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        image {
          width: 104rpx;
          height: 104rpx;
          margin-top: 25rpx;
          margin-right: 10rpx;
        }
        .icon {
          width: 60rpx;
          height: 32rpx;
          border-radius: 0px 4rpx 0px 16rpx;
          font-size: 18rpx;
          background: #0966ff;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
